<template>
  <div>异步加载（多选）
    <!-- multiple -->
    <n-select
      v-model:value="selectedValues"
      filterable
      multiple
      placeholder="搜索关键词"
      :options="options"
      :loading="loading"
      clearable
      remote
      :clear-filter-after-select="false"
      @search="handleSearch"
    />

    <n-statistic
      label="一个小目标"
      tabular-nums
      class="div-row"
      style="display: flex;flex-direction: row;"
    >
      <n-number-animation
        ref="numberAnimationInstRef"
        show-separator
        :from="0"
        :to="3312"
        :active="true"
      />
      /
      <n-number-animation
        ref="numberAnimationInstRef"
        show-separator
        :from="0"
        :to="10000"
        :active="true"
      />
    </n-statistic>
  </div>

</template>

<script>
import { defineComponent, ref } from "vue";

const options = [
  {
    label: "Drive My Car",
    value: "song1",
  },
  {
    label: "Norwegian Wood",
    value: "song2",
  },
  {
    label: "You Won't See",
    value: "song3",
  },
  {
    label: "Aowhere Man",
    value: "song4",
  },
  {
    label: "Bhink For Yourself",
    value: "song5",
  },
  {
    label: "The Word",
    value: "song6",
  },
  {
    label: "Michelle",
    value: "song7",
  },
  {
    label: "What goes on",
    value: "song8",
  },
  {
    label: "Girl",
    value: "song9",
  },
  {
    label: "I'm looking through you",
    value: "song10",
  },
  {
    label: "Cn My Life",
    value: "song11",
  },
  {
    label: "Sait",
    value: "song12",
  },
];

export default defineComponent({
  setup() {
    const loadingRef = ref(false);
    const optionsRef = ref([]);

    return {
      selectedValues: ref(null),
      loading: loadingRef,
      options: optionsRef,
      handleSearch: (query) => {
        console.log("1111111");
        if (!query.length) {
          optionsRef.value = [];
          return;
        }
        loadingRef.value = true;
        window.setTimeout(() => {
          optionsRef.value = options.filter(
            (item) => ~item.label.indexOf(query)
          );
          loadingRef.value = false;
        }, 1e3);
      },
    };
  },
});
</script>

<style scoped>
.div-row {
  display: flex;
  flex-direction: row;
}
</style>